<template>
  <div class="box" v-for="(item,index) in 4" :key="index">
    <div class="user">
      <p>李老八</p>
      <img style="width: 80px; height: 80px"  src="http://lixinghe.meimeng.eu.org/flower/image/favction.jpg" alt="图片走丢了">
    </div>
    <div class="box-content">
      <p>2022-09-15-20:10</p>
      <img style="width: 80px; height: 80px" src="http://lixinghe.meimeng.eu.org/flower/image/favction.jpg" alt="图片走丢了~">
      <p>商品是不错，可惜太贵了</p>
    </div>
  </div>
  <!--分页-->
  <div class="pagin">
    <el-pagination
        background
        layout="prev, pager, next"
        :total="50"
        class="mt-4"
    />
  </div>
</template>

<script>
export default {
  name: "commentList",
  props:[
      'listData'
  ],
  setup(){

  }
}
</script>

<style scoped lang="scss">
  .box {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid sandybrown;
    .user {
      padding: 0 0 0 15px;
      text-align: center;
    }
    p {
      padding: 20px 0;
    }
  }
  .box-content {
    margin-left: 50px;
    display: flex;
    flex-direction: column;
  }
  * {
    margin: 0;
    padding: 0;
  }
  .pagin {
    display: flex;
    padding: 20px;
    justify-content: center;
  }
</style>
